<template>
  <div style="display: flex;align-items: center;justify-content: center;background-color: #669fefff;height: 100vh;">
    <div style="display: flex;width: 50%;background-color: white;border-radius: 5px;overflow: hidden;">
      <div style="flex: 1;">
        <img src="@/assets/img/register.png" alt="" style="width: 100%;">
      </div>
      <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <el-form :model="user" style="width: 80%;" :rules="rules" ref="registerRef">
          <div style="font-weight: bold; font-size: 20px;margin-bottom: 20px;text-align: center;">
            大学生成长成才监测平台
          </div>
          <el-form-item prop="role">
            <el-select v-model="user.role" placeholder="请选择角色" style="width: 100%;">
              <el-option label="学生" value="STUDENT"></el-option>
              <el-option label="教师" value="TEACHER"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input placeholder="请输入用户名" v-model="user.name" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="user.password" show-password prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item prop="confirmPass">
            <el-input placeholder="请确认密码" v-model="user.confirmPass"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" @click="register">注册</el-button>
          </el-form-item>
          <div style="display: flex;">
            <div style="flex: 1;text-align: left">已有账号？去<span style="color:aquamarine;cursor: pointer;" @click="$router.push('/')">登录</span></div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'register',
  data() {
    const validatePass = (rules, value, callback) => {
      if (value === '') {
        callback(new Error('请输入确认密码'));
      } else if(value !== this.user.password){
        callback(new Error('两次密码不一致'));
      } else {
        callback();
      }
    };
    return {
      code:'',
      user: {
        code:'',
        name: '',
        password: '',
        confirmPass:'',
        role:''
      },
      rules:{
        role: [{
          required: true, message: '请选择角色', trigger: 'change'
        }],
        name:[{
          required:'true',message:'请输入账号',trigger:'blur'
        }],
        password:[{
          required:'true',message:'请输入密码',trigger:'blur'
        }],
        confirmPass:[{
          validator:validatePass,trigger:'blur'
        }],
      },
    }
  },
  methods:{
    getCode(code){
      this.code=code.toLowerCase()
    },
    register() {
      this.$refs['registerRef'].validate((valid => {
        if (valid) {
          this.$request.post("/register", this.user).then(res => {
            if (res.code === '200') {
              this.$router.push('/');
              this.$message.success('注册成功');
            } else {
              this.$message.error(res.msg);
            }
            console.log(res);
          }).catch(error => {
            console.error('Error:', error);
            this.$message.error('注册失败，请稍后再试');
          });
        }
      }));
    }
  }
}
</script>

<style scoped></style>